<template>
    <view class="privacy-modal" :class="{ show: innerShow }" @touchmove.stop="" :style="Theme">
        <view class="privacy-dialog">
            <view class="privacy-title">
                {{privacyTitle}}
            </view>
            <view class="privacy-content">
                {{ privacyDesc }}
                <text class="privacy-link" @click="openPrivacyContract">
                    {{ privacyContractName || '《用户隐私指引》' }}
                </text>
                {{ privacySubDesc }}
            </view>
            <view class="privacy-dialog-footer">
                <button id="btn-disagree" type="default" class="btn btn-disagree" @click="handleDisagree">
                    拒绝
                </button>
                <button id="agree-btn" type="default" class="btn btn-agree" open-type="agreePrivacyAuthorization"
                    @bindagreeprivacyauthorization="handleAgree" @click="handleAgree">
                    同意
                </button>
            </view>
        </view>
    </view>
</template>

<script setup>
    import { ref, onMounted, onActivated } from 'vue'
    import { useTheme } from '@/composables/useTheme'

    const props = defineProps({
        privacyTitle: {
            type: String,
            default: '用户隐私保护提示'
        },
        privacyDesc: {
            type: String,
            default: '感谢您使用本应用，您使用本应用的服务之前请仔细阅读并同意'
        },
        privacyName: {
            type: String,
            default: ''
        },
        privacySubDesc: {
            type: String,
            default: '当您点击同意并开始使用产品服务时，即表示你已理解并同意该条款内容。'
        }
    })

    const emits = defineEmits(['disagree', 'agree'])
    const { Theme } = useTheme()
    const innerShow = ref(false)
    const privacyContractName = ref(props.privacyName)

    const getPrivacySetting = () => {
        if(!wx?.getPrivacySetting) return
        
        wx.getPrivacySetting({
            success: res => {
                privacyContractName.value = props.privacyName || res.privacyContractName
                innerShow.value = res.needAuthorization
            },
            fail: () => {
                innerShow.value = true
            }
        })
    }

    const handleDisagree = () => {
        innerShow.value = false
        emits('disagree')
    }

    const handleAgree = () => {
        innerShow.value = false
        emits('agree')
    }

    const openPrivacyContract = () => {
        wx?.openPrivacyContract?.()
    }

    onMounted(getPrivacySetting)
    onActivated(getPrivacySetting)
</script>

<style lang="scss" scoped>
.privacy-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1110;
    opacity: 0;
    background: rgba(0, 0, 0, 0.6);
    transition: all 0.3s ease;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    
    &.show {
        opacity: 1;
        pointer-events: auto;
    }
}

.privacy-dialog {
    width: 680rpx;
    max-width: 90%;
    border-radius: 16rpx;
    overflow: hidden;
    background: linear-gradient(180deg, var(--primary-color) 0%, #fff 30%);
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
}

.privacy-title {
    padding: 30rpx;
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
    color: #333;
}

.privacy-content {
    padding: 0 40rpx 40rpx;
    font-size: 30rpx;
    line-height: 1.6;
    color: #666;
    
    .privacy-link {
        color: var(--primary-color);
        text-decoration: underline;
    }
}

.privacy-dialog-footer {
    display: flex;
    justify-content: space-between;
    padding: 0 40rpx 40rpx;
    gap: 30rpx;
    
    .btn {
        flex: 1;
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 12rpx;
        font-size: 32rpx;
        border: none;
        
        &::after {
            border: none;
        }
        
        &-disagree {
            background: #f5f5f5;
            color: #666;
        }
        
        &-agree {
            background: var(--primary-color);
            color: #fff;
        }
    }
}
</style>
